<template>
  <q-dialog
    no-backdrop-dismiss
    v-model="recordDetailVisible"
    square
    position="standard"
  >
    <q-card style="width: 800px; max-width: 80vw">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">
          {{ formTypeName }} {{ $t("Role") }}:
          {{ recordDetail.value.role_code }}
        </div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-separator />

      <q-card-section>
        <q-form ref="recordDetailForm">
          <div class="col">
            <q-input
              class="col"
              filled
              v-model="recordDetail.value.role_code"
              label="角色编码(英文)"
              :rules="[(val) => (val && val.length > 0) || '必须输入角色编码']"
            />
            <q-input
              class="col"
              filled
              v-model="recordDetail.value.role_name"
              label="角色名称"
              :rules="[(val) => (val && val.length > 0) || '必须输入角色名']"
            >
            </q-input>
          </div>
          <q-input
            filled
            v-model="recordDetail.value.memo"
            :label="$t('Memo')"
          />
        </q-form>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right">
        <q-btn label="保存" color="primary" @click="handleAddOrEdit" />
        <q-btn label="取消" color="negative" v-close-popup />
      </q-card-actions>

      <q-inner-loading :showing="loading">
        <q-spinner-gears size="50px" color="primary" />
      </q-inner-loading>
    </q-card>
  </q-dialog>
</template>

<script setup>
import useRecordDetail from "src/composables/useRecordDetail";
import { postAction } from "src/utils/requestAction";
import { useStorageStore } from "src/stores/storage";
import { computed, ref } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";

const $q = useQuasar();
const { t } = useI18n();
const emit = defineEmits(["handleFinish"]);
const url = {
  add: "role/add-role",
  edit: "role/edit-role",
  queryById: "role/query-role-by-id",
};

const defaults = {
  role_code: "",
  role_name: "",
  memo: "",
};

const {
  dictOptions,
  formType,
  formTypeName,
  recordDetail,
  recordDetailVisible,
  loading,
  show,
  recordDetailForm,
  handleAddOrEdit,
} = useRecordDetail(url, emit, defaults);

defineExpose({
  show,
  formType,
  recordDetail,
});
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "RoleRecordDetail",
});
</script>
